<section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input class="new-todo"
				placeholder="What needs to be done?"
				autofocus
				(keyup.enter)="addTodo($event)">
			</header>
			<!-- This section should be hidden by default and shown when there are todos -->
		<ng-template [ngIf]="todos.length">
			<section class="main">
				<input id="toggle-all"
				class="toggle-all"
				type="checkbox"
				(change) = "toggleAll = $event.target.checked"
				[checked] = "toggleAll">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<!--
							li 是每一个任务项
							每个任务项有三种状态：
								正常状态  没有样式
								完成状态  completed
								编辑状态  editing
						 -->

					<li *ngFor="let todo of filterTodos; let i = index;"
					[ngClass]="{
		completed: todo.done,
		editing: currentEditing === todo
	}">
						<div class="view">
							<input class="toggle" type="checkbox"
							[(ngModel)]="todo.done"
							>
							<label (dblclick)="currentEditing = todo">{{ todo.title }}</label>
							<button class="destroy"
								(click)="removeTodo(i)"
							></button>
						</div>
						<input class="edit"
						[value]="todo.title"
						(keyup)="handleEditKeyUp($event)"
						(keyup.enter)="saveEdit(todo, $event)"
						(blur)="saveEdit(todo, $event)">
					</li>

				</ul>
			</section>
			<!-- This footer should hidden by default and shown when there are todos -->
			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{ remaningCount }}</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a [ngClass]="{
							selected: visibility === 'all'
						}" href="#/">All</a>
					</li>
					<li>
						<a [ngClass]="{
							selected: visibility === 'active'
						}" href="#/active">Active</a>
					</li>
					<li>
						<a [ngClass]="{
							selected: visibility === 'completed'
						}" href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button
				(click)="clearAllDone()"
				class="clear-completed">Clear completed</button>
			</footer>
			</ng-template>
		</section>
		<footer class="info">
			<p>Double-click to edit a todo</p>
			<!-- Remove the below line ↓ -->
			<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
			<!-- Change this out with your name and url ↓ -->
			<p>Created by <a href="http://todomvc.com">you</a></p>
			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>
